<template>
  <div>
    <div>
      <!-- 头部 -->
      <header>
        <Title></Title>
      </header>
      <!-- 内容 -->
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="userName"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :clearable="true"
            :rules="user"
          />
          <van-field
            v-model="phonenumber"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :clearable="true"
            :rules="phones"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
          </div>
        </van-form>
      </div>
      <!-- 底部 -->
      <Botto></Botto>
    </div>
  </div>
</template>
<script>
import Title from "../components/Title.vue";
import Botto from "../components/Bottom.vue";
import { information } from "../api/User-api";
export default {
  data() {
    return {
      userName: "",
      phonenumber: "",
      // 手机号验证
      phones: [
        { required: true, message: "请输入手机号" },
        { validator: this.phone, message: "格式错误 应为11位数字" }
      ],
      // 昵称验证
      user: [
        { required: true, message: "请输入昵称" },
        { validator: this.User, message: "不能为空" }
      ]
    };
  },
  components: {
    Botto,
    Title
  },
  methods: {
    phone(val) {
      return /\d{11}$/.test(val);
    },
    User(val) {
      return val != null;
    },
    fanhui() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (this.userName != 0 && this.phonenumber != 0) {
        // eslint-disable-next-line no-debugger
        debugger;
        information(this.userName, this.phonenumber).then(res => {
          if (res.code == 0) {
            this.$notify({
              type: "success",
              message: "修改成功！"
            });
          } else {
            this.$notify({
              type: "danger",
              message: res.msg
            });
          }
          console.log(res);
        });
      }
    }
  }
};
</script>
<style lang="less" socped>
</style>